<template>
	<div class="app-container">
		<el-card class="box-card">
			<h3>商铺信息</h3>
			<el-form ref="dataForm" :rules="rules" :model="dataForm" label-width="150px">
				<el-form-item label="公司名称" prop="sellerName">
					<el-input v-model="dataForm.sellerName"/>
				</el-form-item>
				<el-form-item label="商铺logo" prop="logoUrl">
					<el-upload :action="uploadPath" :show-file-list="false" :on-success="uploadSuccessHandle"
					           :before-upload="onBeforeUpload" class="avatar-uploader" accept=".jpg, .jpeg, .png, .gif">
						<img v-if="dataForm.logoPic" :src="dataForm.logoPic" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"/>
					</el-upload>
				</el-form-item>

				<el-form-item label="经营范围" prop="scope">
					<el-input v-model="dataForm.scope"/>
				</el-form-item>
				<el-form-item label="地址" prop="address">
					<el-input v-model="dataForm.address"/>
				</el-form-item>
				<el-form-item label="电话" prop="telephone">
					<el-input v-model="dataForm.telephone"/>
				</el-form-item>
				<el-form-item label="开票资料" prop="invoiceInfo">
					<el-input v-model="dataForm.invoiceInfo"/>
				</el-form-item>

				<div class="op-container">
					<el-button v-permission="[1, 2]" type="primary" @click="handleEdit">保存更改</el-button>
				</div>
			</el-form>
		</el-card>
	</div>
</template>


<script>
	import {uploadPath} from '@/api/storage'
	import Editor from '@tinymce/tinymce-vue'
	import {listShops, updateShops} from '@/api/shops'
	import {
		mapState
	} from 'vuex'

	export default {
		name: 'MerchantEdit',
		components: {Editor},
		data() {
			return {
				uploadPath,
				list: undefined,
				dataForm: {
					sellerName: undefined,
					logoPic: undefined,
					description: undefined,
					address: undefined,
					telephone: undefined,
					invoiceInfo: undefined
				},
				rules: {
					address: [{required: true, message: '商铺地址不能为空', trigger: 'blur'}],
					sellerName: [{required: true, message: '商铺标题不能为空', trigger: 'blur'}],
					scope: [{required: true, message: '经营范围不能为空', trigger: 'blur'}],
					telephone: [{required: true, message: '电话不能为空', trigger: 'blur'}],
					invoiceInfo: [{required: true, message: '开票资料不能为空', trigger: 'blur'}]
				},
				listLoading: false
			}
		},
		created() {
			this.getList()
		},
		computed: {
			...mapState(['data'])
		},
		methods: {
			getList: function () {
				this.dataForm = this.data.merchant
			},
			handleEdit: function () {
				this.$refs['dataForm'].validate(valid => {
					if (valid) {
						console.log(this.dataForm)
						updateShops(this.dataForm)
							.then(res => {
								this.$notify.success({
									title: '成功',
									message: '更改成功'
								})
								this.$store.dispatch('delView', this.$route).then(res => {
									this.$router.push({path: '/shops/list'})
								})
							})
							.catch(res => {
								this.$notify.error({
									title: '失败',
									message: res
								})
							})
					} else {
						this.$notify.error({
							title: '失败',
							message: '请完善表单'
						})
					}
				})
			},
			// 上传图片了处理图片
			uploadSuccessHandle(e) {
				this.list.logoPic = e.data.photos
				this.dataForm.logoPic = e.data.photos
			},
			onBeforeUpload(file) {
				const isIMAGE = file.type === 'image/jpeg' || 'image/gif' || 'image/png' || 'image/jpg'
				const isLt1M = file.size / 1024 / 1024 < 1

				if (!isIMAGE) {
					this.$message.error('上传文件只能是图片格式!')
				}
				if (!isLt1M) {
					this.$message.error('上传文件大小不能超过 1MB!')
				}
				return isIMAGE && isLt1M
			}
		}
	}
</script>

<style>
	.el-tag + .el-tag {
		margin-left: 10px;
	}

	.op-container {
		text-align: right;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #20a0ff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 120px;
		height: 120px;
		line-height: 120px;
		text-align: center;
	}

	.avatar {
		width: 145px;
		height: 145px;
		display: block;
	}
</style>
